<template>
  <div class="tui">
    <div class="left">
      <div class="s">
        <span
          v-for="(item, key) in sxList"
          :key="key"
          :class="sId === key ? 'act' : ''"
          @click="sortData(key)"
          >{{ item }}</span
        >
      </div>
      <ul>
        <li
          v-for="(item, key) in $store.getters['shouye/tuijian/sortTuiData']"
          :key="key"
          @click.stop="goDetail(item)"
        >
          <div class="shang">
            <p>{{ item.item_info.author_user_info.user_name }}</p>
            <p>{{ item.item_info.category.ctime }}</p>
            <p v-for="(item, key) in item.item_info.tags" :key="key">
              <span>{{ item.tag_name }}</span>
              <i class="xiao">/</i>
            </p>
          </div>
          <div class="zhong">
            {{ item.item_info.article_info.title }}
          </div>
          <div class="xia">
            <div @click.stop="addDigg(key, sId)">
              <img
                class="xiaImg1"
                
                src=""
                alt=""
              />
              <span :style="item.num?'color:red':''">{{ item.item_info.article_info.digg_count }}</span>
            </div>
            <div>
              <img
                class="xiaImg2"
                src=""
                alt=""
              />

              <span>{{ item.item_info.article_info.comment_count }} </span>
            </div>
          </div>
          <div class="absoImg">
            <img :src="item.item_info.article_info.cover_image" alt="" />
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sxList: ["热门", "最新", "热榜"],
      sId: 0, //控制热门、最新、热榜 高亮
    };
  },
  methods: {
    //点击跳转详情
    goDetail(item){
      localStorage.setItem("detailList", JSON.stringify(item));
      this.$router.push({ path: '/detail',query: {item }})
    },
    //点击热门 最新 热榜
    sortData(key) {
      this.sId = key;
      this.$store.commit("shouye/tuijian/changeId", { key });
    },
    addDigg(key, sId) {
      this.$store.commit("shouye/tuijian/addDigg", { key, sId });
    },
  },
  created() {
    console.log(this.$store.getters["shouye/tuijian/sortTuiData"]);

    this.$store.commit("shangeTopTrue");
  },
  beforeDestroy() {
    this.$store.commit("shangeTopFalse");
  },
};
</script>

<style scoped lang="scss">
.tui {
  padding-top: 10px;
}
</style>
